<template>
  <view class="head-box" v-if="isHeader" :style="{ paddingTop: paddingTopNum + 'rpx' }">
    <view class="top top-fixed">
      <view class="top-box">
        <image
          v-if="isShow"
          @tap="toBack"
          class="back-img"
          src="../../static/img/back-icon-l.png"
          mode=""
        ></image>
        <text class="top-text">{{ titles || title }}</text>
        <text class="right-text" @click="$emit('right')">
          <slot name="right"></slot>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'HeadBox',
    data() {
      return {
        isHeader: false,
        title: '',
      }
    },
    props: {
      //右侧文本
      rightText:{
        type:String,
        default:''
      },
      navigationBarTitleText: {
        type: String,
        default: '',
      },
      //是否要展示关闭按钮
      isShow: {
        type: Boolean,
        default: true,
      },
      //动态的标题
      titles: {
        type: String,
        default: '',
      },
    },
    watch: {
      $route(e) {
        // console.log(e)
        //每次路由变化时重新初始化数据
        this.pageInit()
      },
    },
    created() {
      this.pageInit()
    },
    mounted() {},
    onLoad() {},
    methods: {
      pageInit() {
        // #ifdef H5

        const ua = window.navigator.userAgent.toLowerCase()

        if (
          ua.match(/MicroMessenger/i) == 'micromessenger' ||
          window.navigator.userAgent.indexOf('AlipayClient') != -1 ||
          window.navigator.userAgent.indexOf('AlipayDefined') != -1
        ) {
          // H5时，在微信内打开
          this.isHeader = false
          this.paddingTopNum = '0'
        } else {
          this.isHeader = true
          this.paddingTopNum = '100'
        }
        // #endif
        this.$emit('send', this.paddingTopNum + 'rpx')
        if (this.navigationBarTitleText != '') {
          this.title = this.navigationBarTitleText
        } else {
          const _pageLength = getCurrentPages().length
          const arr = ['pages/classificationSearch/classificationSearch','pages/partyGroupService/partyGroupService']
          if(arr.includes(getCurrentPages ()[_pageLength - 1].route)){
            document.title = this.titles
          }else {
            const _navTitle = getCurrentPages()[_pageLength - 1].$holder.navigationBarTitleText
            this.title =_navTitle
          }


        }
      },
      //返回上一页
      toBack() {
        // #ifdef H5
        let canBack = true
        const pages = getCurrentPages()
        // 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面 ，无法继续返回
        if (pages.length > 1) {
          uni.navigateBack(1)
          return;
        }
        // vue router 可以返回uni.navigateBack失败的页面 但是会重新加载
        let a = this.$router.go(-1)
        // router.go失败之后则重定向到首页
        if (a == undefined) {
          uni.navigateTo({
            url: "/pages/index/index"
          })
        }
        return;
        // #endif
        uni.navigateBack(1)
      },
    },
    onLaunch: function () {
      uni.getSystemInfo({
        success: function (e) {
          Vue.prototype.statusBar = e.statusBarHeight
          // #ifndef MP
          if (e.platform == 'android') {
            Vue.prototype.customBar = e.statusBarHeight + 50
          } else {
            Vue.prototype.customBar = e.statusBarHeight + 45
          }
          // #endif

          // #ifdef MP-WEIXIN
          const custom = wx.getMenuButtonBoundingClientRect()
          Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
          // #endif

          // #ifdef MP-ALIPAY
          Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
          // #endif
        },
      })
    },
  }
</script>

<style lang="scss">
  .head-box {
    z-index: 9999;
  }
  .top-fixed {
    position: fixed;
    top: 0;
    z-index: 9999;
  }
  .top {
    width: 100%;
    height: 100rpx;
    padding: 0 30rpx;
    // background-color: #007AFF;
    background-color: #f7f7f7;
    box-shadow: 0 1px 6rpx #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .top-text {
      color: #000;
      font-size: 34rpx;
    }
  }
  .top-box {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    line-height: 100rpx;
    .back-img{
      width: 44rpx;
      height: 40rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      margin-left: 0rpx;
    }
    .right-text{
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      right: 30rpx;
     }
   }
</style>
